<template>
  <el-dialog
            custom-class='dialog'
            :visible.sync="visible"
            top='2vh'
            lock-scroll
            @open='handleOpen'
            @close ='handleClose'
          >  
          <span slot="title" class="dialog-title">
            选择审批人
          </span>

          

          <el-row class="body" justify='space-between'>
            
            <el-col class="body-left" :span='12'>
                <el-row>
                  <el-col :span='22'>
                    <el-input
                    icon="search"
                    class="input" placeholder="搜索 拼音 名字 编号"
                    v-model='shenpiInput'
                    @keyup.enter.native='shenpiSearch'
                    :on-icon-click="shenpiSearch"></el-input>
                  </el-col>
                </el-row>

              
                <section class="mianbao">

                  <el-tooltip popper-class='tooltip2' :content="getCcList2.fristDept && getCcList2.fristDept.descr" placement="top">
                    <p :style='mianbaoShowIf("b")?"":"overflow:visible"' @click.stop='sendBumenAjax2(getCcList2 && getCcList2.fristDept)'>{{getCcList2.fristDept && getCcList2.fristDept.descr}}</p>
                  </el-tooltip>

                  <span v-if='mianbaoShowIf("b")' class="el-icon-arrow-right"></span>
                  <el-tooltip v-if='mianbaoShowIf("b")' popper-class='tooltip2' :content="getCcList2.checkDept && getCcList2.checkDept.descr" placement="top">
                    <p>{{getCcList2.checkDept && getCcList2.checkDept.descr}}</p>
                  </el-tooltip>	
                  
                </section>

          
                <section class="bumen" v-if='getCcList2.deptList && getCcList2.deptList.length'>
                  <p v-for='(k,i) in getCcList2.deptList' @click.stop='sendSecondBumenAjax2(k)'>
                    <span>{{k.descr}}</span>
                    <span class="el-icon-arrow-right"></span>
                  </p>
                </section>

                <section class="checkbox" v-if='getCcList2'>
                  <el-checkbox-group  v-model='form.shenpiSelect'>
                    <p v-for='(k,i) in getCcList2.empList'  class="ellipsis">
                       
                      <el-checkbox :label='`${k.name}-${k.emplid}-${k.dept_descr}`'>{{k.name}}</el-checkbox><span style="font-size:12px;">&nbsp;&nbsp;{{k.emplid}}&nbsp;</span><span style="font-size:12px;" :title="k.dept_descr">({{k.dept_descr}})</span>
                     
                    </p>

                  </el-checkbox-group> 
                </section>

          
            </el-col>

            <el-col class="body-right" :span='12'>
              <el-row class="body-right-title" tag='h2'>
                已选择审批人
              </el-row> 
            <el-row class="body-right-content" v-for='(k,i) in form.shenpiSelect'>
              <el-row><el-col>{{k.split('-')[0]}}<span>({{k.split('-')[1]}})</span></el-col><el-col @click.native='form.shenpiSelect.splice(i,1)'>删除</el-col></el-row>
            </el-row>
        
            </el-col>
            
          </el-row>

          <div slot="footer" class="dialog-footer">
            <el-button @click.stop="shenpiSure" type="primary">保 存</el-button>
            <el-button @click.stop = "closeShenpi">取 消</el-button>
          </div>

         </el-dialog>
</template>

<script>
import { Message } from 'element-ui'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      visible: false,
      oldShenpi: [],
      getCcList2: [],
      shenpiInput: null,
      wfRoleId: '',
      form: {
        shenpiSelect: []
      }
    }
  },
  watch: {
    dialogVisible (newValue, oldValue) {
      this.visible = newValue
    }
  },
  mounted () {
    this.getShenpiData()
  },
  methods: {
    handleOpen () {
      this.oldShenpi = this.form.shenpiSelect

      const params = {
        id: this.id
      }

      this.Axios
        .Post('/wfConfAssignee/getAssigneeByWfRoleId', params)
        .then((res) => {
          this.form.shenpiSelect = this.getTransformGetData(res.data.datas)
        })
    },
    getTransformGetData (list) {

      if (!list || !list.length) return []
      let result = []


      list.forEach(item => {
        result.push(`${item.emplName}-${item.emplid}-${item.dept_descr || ''}`)
      })


      return result
    },
    sendBumenAjax2 (data) {
      let { setid, deptid } = data;

      let params = {
        setid,
        deptid
      };

      this.Axios.Post(this.URL.getCcListByDept.url, params).then(res => {
        let data = res.data.datas;
        let getCcList = this.getCcList2;
        ({
          fristDept: getCcList.fristDept,
          deptList: getCcList.deptList,
          checkDept: getCcList.checkDept,
          empList: getCcList.empList
        } = data);
      });
    },
    sendSecondBumenAjax (data) {
      let { setid, deptid } = data;

      let params = {
        setid,
        deptid
      };

      this.Axios.Post(this.URL.getCcListByDept.url, params).then(res => {
        let data = res.data.datas;
        let getCcList = this.getCcList;
        ({
          fristDept: getCcList.fristDept,
          deptList: getCcList.deptList,
          checkDept: getCcList.checkDept,
          empList: getCcList.empList
        } = data);
      });
    },
    getShenpiData () {
      this.Axios.Post(this.URL.getCcList.url).then(res => {
        this.getCcList2 = res.data.datas;
        let result = [];

        !this.getCcList2.checkDept && (this.getCcList2.checkDept = {})
        !this.getCcList2.fristDept && (this.getCcList2.fristDept = {})

      })
    },
    handleClose () {
      this.$emit('update:dialogVisible', false)
    },
    closeShenpi () {
      this.form.shenpiSelect = this.oldShenpi
      this.handleClose()
    },
    sendSecondBumenAjax2 (data) {
      let { setid, deptid } = data;

      let params = {
        setid,
        deptid
      };

      this.Axios.Post(this.URL.getCcListByDept.url, params).then(res => {
        let data = res.data.datas;
        let getCcList = this.getCcList2;
        ({
          fristDept: getCcList.fristDept,
          deptList: getCcList.deptList,
          empList: getCcList.empList,
          checkDept: getCcList.checkDept
        } = data);
      });
    },
    mianbaoShowIf (type) {
      if (type == 'a') {
        if (this.getCcList) {
          if (
            this.getCcList.fristDept && (this.getCcList.fristDept.descr !== this.getCcList.checkDept.descr)
          ) {
            return true;
          }
        }
        return false;
      } else {
        if (this.getCcList2) {
          if (
            this.getCcList2.fristDept && (this.getCcList2.fristDept.descr !== this.getCcList2.checkDept.descr)
          ) {
            return true;
          }
        }
        return false;
      }
    },
    shenpiSearch () {
      if (!this.shenpiInput) {
        this.getShenpiData();
      } else {
        let params = {
          search: this.shenpiInput,
          setid: this.getCcList2.fristDept.setid
        };

        this.Axios.Post(this.URL.getCcListBySearch.url, params).then(res => {
          let list = res.data.datas.empList;
          if (list && list.length) {
            this.getCcList2.checkDept.descr = '搜索结果';
            this.getCcList2.deptList = [];
            this.getCcList2.empList = list;
          } else {
            Message({
              message: '查无此人,请调整关键字,重新搜索',
              type: 'error'
            });
          }
        });
      }
    },
    sendSecondBumenAjax2 (data) {
      let { setid, deptid } = data;

      let params = {
        setid,
        deptid
      };

      this.Axios.Post(this.URL.getCcListByDept.url, params).then(res => {
        let data = res.data.datas;
        let getCcList = this.getCcList2;
        ({
          fristDept: getCcList.fristDept,
          deptList: getCcList.deptList,
          empList: getCcList.empList,
          checkDept: getCcList.checkDept
        } = data);
      });
    },

    getTransformSend (list) {
      let result = []
      list.forEach(ele => {
        result.push(ele.split('-')[1])
      })
      return result
    },
    shenpiSure () {

      const params = {
        emplIds: this.getTransformSend(this.form.shenpiSelect),
        wfRoleId: this.id
      }

      this.Axios
        .Post('/wfConfAssignee/addAssignee', params)
        .then(res => {
          if (res.data.status == 1) {
            Message.success(res.data.message)
          }
        })

      this.handleClose()



    }
  },
}
</script>

<style lang='less' scoped>
.xiaojia {
  background-color: #75d155 !important;
  color: #fff !important;
}
.pass {
  color: #339966;
}

.nook {
  color: #c7254e;
}

.checking {
  color: #38f;
}

.imgContainer img {
  display: inline-block;
  margin-right: 14px;
  max-height: 80px;
  cursor: pointer;
}
// .imgContainer img:not(:first-child){
//   margin-right:14px;
// }

.tabDetail {
  height: 100vh;
  overflow-x: hidden;
  background-color: rgb(236, 240, 245);
}
.reason {
  span {
    float: left;
  }
  span:last-of-type {
    max-width: 90%;
    white-space: wrap;
    overflow: hidden;
    word-wrap: break-word;
  }
}
.reasonTitle {
  @diff : 120px;
  display: inline-block;
  word-wrap: break-word;
  width: calc(~'100% - '@diff);
}
.floatReasonTitle {
  float: left;
}

.add-shenpi {
  font-size: 15px;
  margin-left: 12px;
  color: #38f;
  cursor: pointer;
  &:hover {
    color: rgb(83, 154, 253);
  }
}
.detail {
  width: 80%;
  margin: 0 auto;
  padding-top: 70px;
  padding-bottom: 50px;

  .color-one {
    color: #999;
  }
  .color-red {
    color: #f00;
  }
  .color-two {
    color: #38f;
  }
  .color-third {
    color: #3c8dbc;
  }
  .return {
    color: #38f;
    cursor: pointer;
    border: 1px solid #38f;
    padding: 6px 15px;
    border-radius: 15px;
    background: #fff;
  }

  .return.select {
    color: #fff !important;
    background-color: #38f !important;
  }

  .view {
    width: 100%;
    background-color: #fff;
    margin-top: 20px;
    padding-bottom: 5px;
    border-radius: 5px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.117647),
      0 1px 4px rgba(0, 0, 0, 0.117647);
    .header {
      background-color: #3c8dbc;
      padding: 10px 10px 8px 20px;
      font-size: 15px;
      line-height: 24px;
      overflow: hidden;
      > span {
        color: #fff;
        margin-left: 10px;
      }
      > span:first-of-type {
        margin-left: 0;
        color: #38f;
        background-color: #fff;
        width: 24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        font-size: 14px;
        text-align: center;
        border-radius: 50%;
        display: inline-block;
      }
      > span.right {
        float: right;
      }

      > span.right.last {
        position: relative;
      }
    }

    .content {
      padding: 16px 58px 40px 58px;
      position: relative;
      .span-width {
        width: 90px;
        display: inline-block;
      }

      a {
        cursor: pointer;
        span {
          position: relative;
          top: -4px;
        }
      }

      .word,
      .excel,
      .img,
      .pdf,
      .file {
        display: inline-block;
        width: 20px;
        height: 20px;
        background: no-repeat center center/ 100% 100%;
        margin: 0 8px 0 2px;
      }

      .word {
        background-image: url(../../../../static/images/word.svg);
      }
      .pdf {
        background-image: url('../../../../static/images/pdf.svg');
      }
      .excel {
        background-image: url(../../../../static/images/excel.svg);
      }

      .img {
        background-image: url(../../../../static/images/img.svg);
      }

      .file {
        background-image: url(../../../../static/images/file.svg);
      }

      &::before {
        content: '';
        position: absolute;
        left: 0;
        bottom: 20px;
        background-color: #ecf0f5;
        height: 1px;
        width: 95%;
        left: 50%;
        transform: translate(-50%);
      }

      & > div {
        margin: 6px 0;
        i.wenhao {
          font-style: normal;
          background-color: #89abc6;
          color: #fff;
          display: inline-block;
          width: 14px;
          height: 14px;
          line-height: 16px;
          border-radius: 50%;
          text-align: center;
          margin-left: 3px;
          font-size: 12px;
          cursor: pointer;
        }
        & > span:nth-of-type(n + 2) {
          margin-left: 14px;
        }
      }

      & > div:last-of-type {
        overflow: hidden;
        & > p {
          float: left;
          margin-bottom: 4px;
        }

        & > a {
          float: left;
        }

        & > span {
          float: left;
        }
      }
    }

    .steps {
      padding: 0px 0 20px 16px;
      .add-icon {
        position: absolute;
        width: 18px;
        height: 18px;
        background-color: #fff;
        display: inline-block;
        color: #00aff0;
        background: url(../../../../static/images/addshenpi.svg) no-repeat
          center center /100%;
        a:first-of-type {
          cursor: default;
          position: absolute;
          left: 1.3vw;
          font-size: 10px;
          top: 50%;
          margin-top: -50%;
          line-height: 1.2;
          width: 20vw;
        }

        a:nth-of-type(2) {
          position: absolute;
          transform: scale(0.9);
          width: 4vw;
          left: 16vw;
          font-size: 10px;
          top: 50%;
          margin-top: -50%;
          color: #339966;
        }

        @media (min-width: 1380px) {
          a:nth-of-type(2) {
            left: 15.7vw;
          }
        }

        @media (min-width: 1380px) {
          a:nth-of-type(1) {
            left: 1.2vw;
          }
        }
      }

      .add-icon.add {
        background: url(../../../../static/images/addshenpi.svg) no-repeat
          center center /100%;
        cursor: pointer;
        color: rgb(60, 141, 188);
        a {
          cursor: pointer;
          width: 5vw;
          color: #d35757;
          margin-left: 0.8vw;
        }
      }
      .steps-list.last {
        .add-icon.add {
          margin: 60px 0px 0px 0px;
        }
      }
      .steps-list.isShowXian {
        .xian.last {
          border: none;
        }
      }
      .steps-list {
        .add-icon.add {
          margin: 60px 0px 40px 0px;
        }
      }

      .steps-list {
        min-height: 60px;
        position: relative;
        & > div,
        & > p {
          display: inline-block;
          vertical-align: top;
        }

        .date {
          width: 15%;
        }

        .people {
          margin-left: 4%;
          width: 30%;
          cursor: pointer;
        }

        .message {
          word-wrap: break-word;
          white-space: wrap;
          max-width: 30%;
          padding-bottom: 20px;
        }

        .buzhou {
          margin-left: 30px;
          width: 8%;
        }

        .xian {
          position: absolute;
          bottom: 0;
          top: 0;
          left: 16%;
          border-right: 1px dashed #999;
          width: 1px;
          min-height: 60px;
          > span {
            transform: translateX(-50%) translateY(2px) scale(1.3);
            background-color: #fff;
            color: #999;
          }
          > span.ok {
            color: #38f;
          }
        }

        .xian.last {
          & > span {
            top: 4px;
          }
        }
      }
    }

    .deside {
      margin: 30px 0px 20px 10px;
      text-align: left;
      & > a {
        color: #38f;
        cursor: pointer;
        border: 1px solid #38f;
        padding: 6px 15px;
        border-radius: 15px;
        margin: 0 2px;
      }
      & > a.disable {
        background-color: rgb(238, 241, 246);
        color: #bfcbd9;
        border-color: #d1dbe5;
        cursor: not-allowed;
      }
    }
  }

  .text-area {
    width: 60%;
    margin: 8px 12px 30px 12px;
    .submit {
      margin-top: 20px;
      cursor: pointer;
    }
  }

  .dialog-footer {
    position: relative;
    left: 100%;
    transform: translateX(-50%);
    width: 320px;
  }
}

.dialog {
  overflow-x: hidden;
  .dialog-title {
    display: inline-block;
    text-align: center;
    color: #999;
    font-size: 17px;
    position: relative;
    left: 50%;
    top: -1px;
    transform: translateX(-50%);
  }

  .body {
    margin-top: 15px;
    ::-webkit-scrollbar {
      width: 4px;
    }
    ::-webkit-scrollbar-track {
      background-color: #bee1eb;
    }
    ::-webkit-scrollbar-thumb {
      background-color: #00aff0;
    }
    ::-webkit-scrollbar-thumb:active {
      background-color: #00aff0;
    }

    .body-left,
    .body-right {
      padding-left: 20px;
    }
    .body-left {
      height: 380px;
      max-height: 380px;
      overflow-y: auto;
      .checkbox {
        padding: 10px 0 0 10px;
        p {
          padding: 7px 0;
        }
      }
      .mianbao {
        padding: 14px 0 14px 14px;
        position: relative;
        margin-left: 2px;
        color: #333;
        font-size: 14px;
        overflow: hidden;
        &::after {
          content: '';
          position: absolute;
          left: -6px;
          bottom: 6px;
          height: 1px;
          width: 95%;
          background: #f1f1f1;
        }
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          width: 3px;
          height: 14px;
          transform: translateY(-50%);
          background: #38f;
        }
        span {
          float: left;
          margin: 4px 8px 0 8px;
          color: #999;
          font-size: 12px;
          transform: scale(0.7);
        }
        p {
          float: left;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
          max-width: 100px;
        }
        p:first-of-type {
          cursor: pointer;
        }

        p:last-of-type {
          color: #38f;
        }
      }

      .bumen {
        width: 92%;

        & > p {
          padding: 8px 4px;
          cursor: pointer;
          span:first-of-type {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            max-width: 210px;
            display: inline-block;
          }
          span:last-of-type {
            color: #999;
            transform: scale(0.7);
            float: right;
            margin-top: 4px;
          }
        }
      }
      .body-left-people {
        margin-top: 20px;
        padding-right: 100px;
        font-size: 15px;
        & > div {
          margin-top: 10px;
          color: #999999;
          font-weight: 700;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          > span {
            font-weight: 500;
          }
        }
      }

      .show-all {
        font-size: 13px;
        margin: 30px 0 0 10px;
        color: #999;
        cursor: pointer;
        margin-bottom: 20px;
      }

      .body-left-title {
        margin-top: 30px;
      }
    }

    .body-right {
      height: 360px;
      max-height: 360px;
      overflow-y: auto;
      .body-right-content {
        & > div {
          margin-top: 20px;

          & > div:first-of-type {
            color: #333;
            float: left;
            max-width: 75%;
            span {
              color: #999;
              margin-left: 6px;
            }
          }

          & > div:last-of-type {
            float: right;
            width: 40px;
            color: #00aff0;
            cursor: pointer;
            margin-right: 10px;
          }
        }
      }
    }
  }
}

.fileContainer {
  margin-left: 14px;
  overflow: hidden;
  clear: both;
  display: inline-block;
  width: 80%;
}
.fileContainer > a > a {
  margin-top: 4px;
}
</style>

<style lang='less'>
body .tooltip-300 {
  max-width: 300px;
  line-height: 25px !important;
  letter-spacing: 1px;
  font-size: 15px !important;
  background-color: #f0f9eb !important;
  color: #67c23a !important;
  padding: 15px !important;
  .popper__arrow {
    border-top-color: #f0f9eb !important;
    border-bottom-color: #f0f9eb !important;
  }
  .popper__arrow::after {
    border-top-color: #f0f9eb !important;
    border-bottom-color: #f0f9eb !important;
  }
}

.tooltip2 {
  background-color: #38f !important;

  .popper__arrow {
    border-top-color: #38f !important;
  }
  .popper__arrow::after {
    border-top-color: #38f !important;
    border-bottom-color: #38f !important;
  }
}
</style>
